<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.2">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"xiaoqingming18.github.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.15.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>

    <meta name="description" content="路由的介绍各个框架都有自己的路由，Vue中的路由实现就是VueRouter。 路由就是路径与组件的映射关系。 VueRouter的使用VueRouter的导入与注册首先要下载VueRouter模块到项目中，可以使用以下命令： 1npm&#x2F;yarn add vue-router@3.6.5  Vue2中要使用VueRouter3，Vue3中要使用VueRouter4  随后在main.js中导入路由模">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue：路由VueRouter">
<meta property="og:url" content="http://xiaoqingming18.github.io/2023/07/31/Vue%EF%BC%9A%E8%B7%AF%E7%94%B1VueRouter/index.html">
<meta property="og:site_name" content="鸣蜩十七">
<meta property="og:description" content="路由的介绍各个框架都有自己的路由，Vue中的路由实现就是VueRouter。 路由就是路径与组件的映射关系。 VueRouter的使用VueRouter的导入与注册首先要下载VueRouter模块到项目中，可以使用以下命令： 1npm&#x2F;yarn add vue-router@3.6.5  Vue2中要使用VueRouter3，Vue3中要使用VueRouter4  随后在main.js中导入路由模">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-07-31T08:59:56.000Z">
<meta property="article:modified_time" content="2023-07-31T11:58:14.628Z">
<meta property="article:author" content="鸣蜩十七">
<meta property="article:tag" content="-Vue -VueRouter">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://xiaoqingming18.github.io/2023/07/31/Vue%EF%BC%9A%E8%B7%AF%E7%94%B1VueRouter/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://xiaoqingming18.github.io/2023/07/31/Vue%EF%BC%9A%E8%B7%AF%E7%94%B1VueRouter/","path":"2023/07/31/Vue：路由VueRouter/","title":"Vue：路由VueRouter"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>Vue：路由VueRouter | 鸣蜩十七</title>
  








  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>

<style>.github-emoji { position: relative; display: inline-block; width: 1.2em; min-height: 1.2em; overflow: hidden; vertical-align: top; color: transparent; }  .github-emoji > span { position: relative; z-index: 10; }  .github-emoji img, .github-emoji .fancybox { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; text-decoration: none !important; user-select: none !important; cursor: auto !important; }  .github-emoji img { height: 1.2em !important; width: 1.2em !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; user-select: none !important; cursor: auto !important; } .github-emoji-fallback { color: inherit; } .github-emoji-fallback img { opacity: 0 !important; }</style>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">鸣蜩十七</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">鸣蜩十七是和女朋友谈恋爱的日子</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-schedule"><a href="/schedule/" rel="section"><i class="fa fa-calendar fa-fw"></i>日程表</a></li><li class="menu-item menu-item-sitemap"><a href="/sitemap.xml" rel="section"><i class="fa fa-sitemap fa-fw"></i>站点地图</a></li><li class="menu-item menu-item-commonweal"><a href="/404/" rel="section"><i class="fa fa-heartbeat fa-fw"></i>公益 404</a></li>
  </ul>
</nav>




</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%9A%84%E4%BB%8B%E7%BB%8D"><span class="nav-text">路由的介绍</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#VueRouter%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-text">VueRouter的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#VueRouter%E7%9A%84%E5%AF%BC%E5%85%A5%E4%B8%8E%E6%B3%A8%E5%86%8C"><span class="nav-text">VueRouter的导入与注册</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#VueRouter%E7%9A%84%E4%BD%BF%E7%94%A8-1"><span class="nav-text">VueRouter的使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="nav-text">路由模块化</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%A3%B0%E6%98%8E%E5%BC%8F%E5%AF%BC%E8%88%AA%EF%BC%88%E5%AF%BC%E8%88%AA%E9%93%BE%E6%8E%A5%EF%BC%89"><span class="nav-text">声明式导航（导航链接）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#router-link%E6%A0%87%E7%AD%BE%E4%BB%8B%E7%BB%8D"><span class="nav-text">router-link标签介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%B3%E8%BD%AC%E4%BC%A0%E5%8F%82"><span class="nav-text">跳转传参</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0%E4%BC%A0%E5%8F%82"><span class="nav-text">1.查询参数传参</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="nav-text">2.动态路由传参</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA"><span class="nav-text">编程式导航</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA%E7%9A%84%E4%B8%A4%E7%A7%8D%E8%AF%AD%E6%B3%95"><span class="nav-text">编程式导航的两种语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-path%E8%B7%AF%E5%BE%84%E8%B7%B3%E8%BD%AC"><span class="nav-text">1.path路径跳转</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC"><span class="nav-text">2. 命名路由跳转</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA%E7%9A%84%E4%B8%A4%E7%A7%8D%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F%EF%BC%9A"><span class="nav-text">编程式导航的两种传参方式：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-path%E8%B7%AF%E5%BE%84%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%E5%AF%B9%E5%BA%94%E7%9A%84%E4%B8%A4%E7%A7%8D%E4%BC%A0%E5%8F%82%E6%96%B9%E6%B3%95"><span class="nav-text">1.path路径跳转方式对应的两种传参方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F%E5%AF%B9%E5%BA%94%E7%9A%84%E4%B8%A4%E7%A7%8D%E4%BC%A0%E5%8F%82%E6%96%B9%E6%B3%95"><span class="nav-text">2. 命名路由跳转方式对应的两种传参方法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F%E8%AE%BE%E7%BD%AE"><span class="nav-text">路由模式设置</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%80%E4%BA%9B%E5%BA%94%E7%94%A8"><span class="nav-text">路由的一些应用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-text">重定向</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#404%E9%A1%B5%E9%9D%A2"><span class="nav-text">404页面</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">鸣蜩十七</p>
  <div class="site-description" itemprop="description">记录我的学习、生活和恋爱日常</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">43</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">37</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://xiaoqingming18.github.io/2023/07/31/Vue%EF%BC%9A%E8%B7%AF%E7%94%B1VueRouter/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="鸣蜩十七">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="鸣蜩十七">
      <meta itemprop="description" content="记录我的学习、生活和恋爱日常">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="Vue：路由VueRouter | 鸣蜩十七">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Vue：路由VueRouter
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>
      

      <time title="创建时间：2023-07-31 16:59:56 / 修改时间：19:58:14" itemprop="dateCreated datePublished" datetime="2023-07-31T16:59:56+08:00">2023-07-31</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">-前端</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="路由的介绍"><a href="#路由的介绍" class="headerlink" title="路由的介绍"></a>路由的介绍</h1><p>各个框架都有自己的路由，Vue中的路由实现就是VueRouter。</p>
<p>路由就是路径与组件的映射关系。</p>
<h1 id="VueRouter的使用"><a href="#VueRouter的使用" class="headerlink" title="VueRouter的使用"></a>VueRouter的使用</h1><h2 id="VueRouter的导入与注册"><a href="#VueRouter的导入与注册" class="headerlink" title="VueRouter的导入与注册"></a>VueRouter的导入与注册</h2><p>首先要下载<code>VueRouter</code>模块到项目中，可以使用以下命令：</p>
<figure class="highlight plaintext"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm/yarn add vue-router@3.6.5</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>Vue2中要使用VueRouter3，Vue3中要使用VueRouter4</p>
</blockquote>
<p>随后在<code>main.js</code>中导入路由模块：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br></pre></td></tr></tbody></table></figure>
<p>接着将路由模块注册到<code>Vue</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>)</span><br></pre></td></tr></tbody></table></figure>
<p>之后创建路由对象：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>()</span><br></pre></td></tr></tbody></table></figure>
<p>最后将路由对象注册到<code>Vue</code>实例中，建立关联：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">    <span class="attr">router</span>: router</span><br><span class="line">}).$amount(<span class="string">'#app'</span>)</span><br></pre></td></tr></tbody></table></figure>
<h2 id="VueRouter的使用-1"><a href="#VueRouter的使用-1" class="headerlink" title="VueRouter的使用"></a>VueRouter的使用</h2><p>完成上面对<code>VueRouter</code>的导入与注册之后便可以使用<code>VueRouter</code>了。</p>
<p>首先，在<code>views</code>目录下创建需要的<strong>页面组件</strong>，并在<code>main.js</code>文件中创建路由对象时传入路由规则配置：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Find</span> <span class="keyword">from</span> <span class="string">'./views/Find.vue'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">My</span> <span class="keyword">from</span> <span class="string">'./views/My.vue'</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>: [</span><br><span class="line">        {<span class="attr">path</span>: <span class="string">'/find'</span>,<span class="attr">component</span>: <span class="title class_">Find</span>},</span><br><span class="line">        {<span class="attr">path</span>: <span class="string">'/my'</span>,<span class="attr">component</span>: <span class="title class_">My</span>}</span><br><span class="line">    ]</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>与页面组件对应的是复用组件，复用组件放在component目录下</p>
</blockquote>
<p>接着，配置路由出口，即配置导航：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/find"</span>&gt;</span>发现<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/my"</span>&gt;</span>我的<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>由于路由组建VueRouter默认会在域名后添加#，所以这里的a标签的href属性路径要以#开头</p>
</blockquote>
<p>当点击不同的链接时，下面的<code>&lt;router-view&gt;</code>标签会替换成对应的组件。</p>
<h1 id="路由模块化"><a href="#路由模块化" class="headerlink" title="路由模块化"></a>路由模块化</h1><p>前面介绍的方法路由的各种配置都堆叠在<code>main.js</code>文件中，十分冗余，下面介绍路由模块化来解决这个问题。</p>
<p>新建<code>router</code>目录，并在该目录下新建<code>index.js</code>文件，在该文件中做以下工作：</p>
<ol>
<li>导入页面组件和<code>Vue</code></li>
<li>导入<code>VueRouter</code>并注册</li>
<li>实例化<code>VueRouter</code>并配置路由规则</li>
<li>暴露router对象</li>
</ol>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Find</span> <span class="keyword">from</span> <span class="string">'../views/Find.vue'</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">My</span> <span class="keyword">from</span> <span class="string">'../views/My.vue'</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>)</span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>: [</span><br><span class="line">        {<span class="attr">path</span>: <span class="string">'/find'</span>,<span class="attr">component</span>: <span class="title class_">Find</span>},</span><br><span class="line">        {<span class="attr">path</span>: <span class="string">'/my'</span>,<span class="attr">component</span>: <span class="title class_">My</span>}</span><br><span class="line">    ]</span><br><span class="line">})</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></tbody></table></figure>
<p>在<code>main.js</code>文件中做以下工作：</p>
<ol>
<li>导入<code>router</code></li>
<li>在实例化<code>Vue</code>对象时传入<code>router</code>配置</li>
</ol>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'./router/index'</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>({</span><br><span class="line">    <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">    <span class="attr">router</span>: router</span><br><span class="line">}).$amount(<span class="string">'#app'</span>)</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>路由模块化之后，组件的路径需要跨一级目录，可以使用@符号直接映射到项目的src目录</p>
<p>例如上面的导入组件语句可以换为 import Find from ‘@/views/Find.vue’</p>
</blockquote>
<h1 id="声明式导航（导航链接）"><a href="#声明式导航（导航链接）" class="headerlink" title="声明式导航（导航链接）"></a>声明式导航（导航链接）</h1><h2 id="router-link标签介绍"><a href="#router-link标签介绍" class="headerlink" title="router-link标签介绍"></a>router-link标签介绍</h2><p>声明式导航就是使用<code>&lt;router-link&gt;</code>标签替代<code>&lt;a&gt;</code>标签。</p>
<p>与<code>&lt;a&gt;</code>标签类似，<code>&lt;router-link&gt;</code>可以通过<code>to</code>属性来实现跳转，并且该属性值可以省略路径前缀<code>#</code>：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/find"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>此外，<code>&lt;router-link&gt;</code>标签还可以通过自动激活的类名实现高亮。具体来说一下，<code>&lt;router-link&gt;</code>标签渲染后也是一个<code>&lt;a&gt;</code>标签，但是会自动为其添加两个类名：</p>
<ol>
<li><code>router-link-active</code>：模糊匹配，例如<code>to="/my"</code>可以匹配<code>/my</code>、<code>/my/a</code>等。</li>
<li><code>router-link-exact-active</code>：精准匹配，例如<code>to="/my"</code>只可以匹配<code>/my</code>。</li>
</ol>
<p>我们可以通过手动编写上述两个类名对应的样式实现导航选中高亮的效果。</p>
<p>上面说的两个类名太长了，我们可以在<code>router</code>的配置项中为这两个类名指定我们自己想要的类名:</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>: [···],</span><br><span class="line">    <span class="attr">linkActiveClass</span>: <span class="string">"active"</span>,</span><br><span class="line">    <span class="attr">linkExactActiveClass</span>: <span class="string">"exactActive"</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<h2 id="跳转传参"><a href="#跳转传参" class="headerlink" title="跳转传参"></a>跳转传参</h2><h3 id="1-查询参数传参"><a href="#1-查询参数传参" class="headerlink" title="1.查询参数传参"></a>1.查询参数传参</h3><p>在<code>&lt;router-link&gt;</code>标签中按以下格式传入查询参数：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/path?参数1=值1&amp;参数2=值2"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在对应跳转到的页面组件中用<code>$route.query</code>接收参数：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{$route.query.参数1}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="2-动态路由传参"><a href="#2-动态路由传参" class="headerlink" title="2.动态路由传参"></a>2.动态路由传参</h3><p>首先配置动态路由，即在配置路由规则时设置好需要的参数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">routes</span>: [</span><br><span class="line">        ···</span><br><span class="line">        {<span class="attr">path</span>: <span class="string">'/find/:参数名'</span>,<span class="attr">component</span>: <span class="title class_">Find</span>}</span><br><span class="line">    ]</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>然后可以在<code>&lt;router-link&gt;</code>标签中按以下格式传入参数：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/path/参数值"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<p>在对应跳转到的页面组件中用<code>$route.params</code>接收参数：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>{{$route.params.参数1}}<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>查询参数传参可以传多个参数，而动态路由传参只可以传一个参数</p>
</blockquote>
<h1 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h1><p>上面的声明式导航适合用于构建底部<code>tabBar</code>导航的页面，但更多的情况是要点击按钮后跳转到指定的组件，这就需要使用编程式导航，下面详细讲解。</p>
<h2 id="编程式导航的两种语法"><a href="#编程式导航的两种语法" class="headerlink" title="编程式导航的两种语法"></a>编程式导航的两种语法</h2><h3 id="1-path路径跳转"><a href="#1-path路径跳转" class="headerlink" title="1.path路径跳转"></a>1.path路径跳转</h3><p>通过<code>$router.push()</code>方法跳转到指定路由页面组件：</p>
<figure class="highlight html"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"$router.push('路由路径path')"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>如果是在vue的methods配置项自定义的方法中跳转，不要忘记需要用this.$route.push()方法，因为在模板内的this是默认指向vue实例的，所以可以省略</p>
</blockquote>
<h3 id="2-命名路由跳转"><a href="#2-命名路由跳转" class="headerlink" title="2. 命名路由跳转"></a>2. 命名路由跳转</h3><p>先在实例化<code>VueRouter</code>时的<code>routes</code>配置项中为每一个路由规则命名：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{<span class="attr">name</span>: <span class="string">'路由名'</span>,<span class="attr">path</span>: <span class="string">'路由路径'</span>,<span class="attr">component</span>: 页面组件}</span><br></pre></td></tr></tbody></table></figure>
<p>然后通过<code>$router.push()</code>方法跳转到指定路由页面组件，和第一种方法的形式不同：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line">    <span class="attr">name</span>: <span class="string">'路由名'</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<h2 id="编程式导航的两种传参方式："><a href="#编程式导航的两种传参方式：" class="headerlink" title="编程式导航的两种传参方式："></a>编程式导航的两种传参方式：</h2><p>编程式导航有两种传参方式：</p>
<ol>
<li>查询参数传参</li>
<li>动态路由传参</li>
</ol>
<p>下面针对编程式导航的两种语法分别演示一下这两种传参方式如何使用。</p>
<h3 id="1-path路径跳转方式对应的两种传参方法"><a href="#1-path路径跳转方式对应的两种传参方法" class="headerlink" title="1.path路径跳转方式对应的两种传参方法"></a>1.path路径跳转方式对应的两种传参方法</h3><p>path路径跳转的查询参数传参如下所示：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">'/路由路径?参数1=值1&amp;参数2=值2'</span>)</span><br></pre></td></tr></tbody></table></figure>
<p>也可以用另一种方式：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line">    <span class="attr">path</span>: <span class="string">'路由路径'</span>,</span><br><span class="line">    <span class="attr">query</span>: {</span><br><span class="line">        参数<span class="number">1</span>:值<span class="number">1</span>,</span><br><span class="line">        参数<span class="number">2</span>:值<span class="number">2</span></span><br><span class="line">    }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>在对应的页面组件通过<code>$route.query.参数名</code>获取参数值。</p>
<p>path路径跳转对应的动态路由传参如下所示：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(<span class="string">'路由路径/参数值'</span>)</span><br></pre></td></tr></tbody></table></figure>
<p>或：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line">    <span class="attr">path</span>: <span class="string">'路由路径/参数值'</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>在对应页面组件通过<code>$route.params.参数名</code>获取参数值。</p>
<h3 id="2-命名路由跳转方式对应的两种传参方法"><a href="#2-命名路由跳转方式对应的两种传参方法" class="headerlink" title="2. 命名路由跳转方式对应的两种传参方法"></a>2. 命名路由跳转方式对应的两种传参方法</h3><p>首先是查询参数传参：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line">    <span class="attr">name</span>: <span class="string">'路由名'</span>,</span><br><span class="line">    <span class="attr">query</span>: {</span><br><span class="line">        参数名<span class="number">1</span>: 值<span class="number">1</span>,</span><br><span class="line">        参数名<span class="number">2</span>: 值<span class="number">2</span></span><br><span class="line">    }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>在对应页面组件通过<code>$route.query.参数名</code>获取对应参数。</p>
<p>然后是动态路由传参：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>({</span><br><span class="line">    <span class="attr">name</span>: <span class="string">'路由名'</span>,</span><br><span class="line">    <span class="attr">params</span>: {</span><br><span class="line">        参数名: 参数值</span><br><span class="line">    }</span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<p>在对应页面组件通过<code>$route.params.参数名</code>获取参数值。</p>
<h1 id="路由模式设置"><a href="#路由模式设置" class="headerlink" title="路由模式设置"></a>路由模式设置</h1><p>路由路径中的<code>#</code>看起来使<code>URL</code>很不自然，可以通过更改路由模式去掉。</p>
<p>共有两种路由模式：</p>
<ol>
<li><code>hash</code>路由：默认的路由模式，<code>URL</code>中有<code>#</code>。</li>
<li><code>history</code>路由：常用这种模式，<code>URL</code>中无<code>#</code>，但上线后需要服务端支持。</li>
</ol>
<p>可以在实例化<code>VueRouter</code>时传入<code>mode</code>配置项来更换路由模式：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>({</span><br><span class="line">    <span class="attr">mode</span>: <span class="string">'history'</span></span><br><span class="line">})</span><br></pre></td></tr></tbody></table></figure>
<h1 id="路由的一些应用"><a href="#路由的一些应用" class="headerlink" title="路由的一些应用"></a>路由的一些应用</h1><h2 id="重定向"><a href="#重定向" class="headerlink" title="重定向"></a>重定向</h2><p>在实例化<code>VueRouter</code>的配置项<code>routes</code>中添加<code>redirect</code>重定向路由规则：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{<span class="attr">path</span>: 路径, <span class="attr">redirect</span>: 重定向到的路径}</span><br></pre></td></tr></tbody></table></figure>
<p>之后访问前面的路径会重定向到后面的路径。</p>
<h2 id="404页面"><a href="#404页面" class="headerlink" title="404页面"></a>404页面</h2><p>在实例化<code>VueRouter</code>的配置项<code>routes</code>中最后一个位置添加一条路由规则，其中<code>path</code>为通配符<code>*</code>，就可以实现404页面，当其上面所有的路由规则都不匹配时，则会跳转到指定的404组件页面：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{<span class="attr">path</span>: <span class="string">'*'</span>,<span class="attr">component</span>: <span class="number">404</span>页面组件}</span><br></pre></td></tr></tbody></table></figure>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/Vue-VueRouter/" rel="tag"># -Vue -VueRouter</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2023/07/20/Vue%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B0/" rel="prev" title="Vue入门笔记">
                  <i class="fa fa-chevron-left"></i> Vue入门笔记
                </a>
            </div>
            <div class="post-nav-item">
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">鸣蜩十七</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>
  <div class="sidebar-dimmer"></div>
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  




  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>



</body>
</html>
